var project;

function init() {
	var $ = go.GraphObject.make; // for conciseness in defining templates

	myDiagram = $(go.Diagram, "myDiagramDiv", {
		"animationManager.isEnabled" : false,
		initialContentAlignment : go.Spot.Center
	});
	
	var cxElement = document.getElementById("contextMenu");
	var myContextMenu = $(go.HTMLInfo, {
		show : showContextMenu,
		mainElement : cxElement
	});

	function nodeTypeImage(type) {
		switch (type) {
		case "server":
			return "img/server.png";
		case "database":
			return "img/db.png";
		case "server0":
			return "img/server_right.png";  //#00CD00
		case "database0":
			return "img/db_right.png";
		case "server-1":
			return "img/server_error.png";
		case "database-1":
			return "img/db_error.png";
		case "NUM":
			return "img/node.png";
		default:
			return "img/node.png";
		}
	}

	myDiagram.nodeTemplate = $(go.Node, "Vertical", {
		locationObjectName : "ICON"
	}, new go.Binding("location", "loc", go.Point.parse)
			.makeTwoWay(go.Point.stringify), $(go.Panel, "Spot", $(go.Panel,
			"Auto", {
				name : "ICON"
			}, $(go.Shape, {
				fill : null,
				stroke : null
			}), $(go.Picture, {
				margin : 5
			}, new go.Binding("source", "type", nodeTypeImage))) // end Auto
	// Panel
	), // end Spot Panel
	$(go.TextBlock, new go.Binding("text"))); // end Node

	// conversion function for Bindings in the Link template:

	function linkProblemConverter(msg) {
		return "gray";
	}

	myDiagram.linkTemplate = $(go.Link, go.Link.AvoidsNodes, {
		corner : 3
	}, $(go.Shape, {
		strokeWidth : 2,
		stroke : "gray"
	}, new go.Binding("stroke", "problem", linkProblemConverter)));

	myDiagram.contextMenu = myContextMenu;
	cxElement.addEventListener("contextmenu", function(e) {
		e.preventDefault();
		return false;
	}, false);
	
	function showContextMenu(obj, diagram, tool) {
		cxElement.style.display = "block";

		var mousePt = diagram.lastInput.viewPoint;
		var bordleft = document.getElementById('myDiagramDiv')
				.getBoundingClientRect().left;
		var bordtop = document.getElementById('myDiagramDiv')
				.getBoundingClientRect().top;

		cxElement.style.left = bordleft + mousePt.x + "px";
		cxElement.style.top = bordtop + mousePt.y + "px";
	}
	
	load();
}

function cxcommand(event, val) {
	if (val === undefined)
		val = event.currentTarget.id;
	var diagram = myDiagram;
	switch (val) {	
	case "edit":		
		edit();
		break;
	}
	diagram.currentTool.stopTool();
}

function edit(){
	var a=document.createElement('a');
	a.setAttribute("href","topomonitor?project="+project);
	a.click();
}

function load() {
	myDiagram.model = go.Model
			.fromJson(document.getElementById("mySavedModel").value);
}

$(function() {
	$('#li_topo').addClass('active open');
	$('#topobrowser').addClass('active');

	init();

	clicktable = function(row) {
		temp = row.id;
		project=temp;
		// console.log(temp);

		$.ajax({
			type : 'post',
			url : 'toposelect',
			dataType : 'text',
			data : {
				"topoid" : row.id
			},
			success : function(msg) {
				var tmp = JSON.parse(msg);
				tmpattr = tmp.nodeAttrArray;
				// console.log(tmpattr);
				nodeattrlist = tmpattr;

				document.getElementById("mySavedModel").value = msg;
				load();
			},
			error : function(msg) {
				console.log('failed');
			}
		});

	};

	var first = $('#nodetable').children(":first").get(0);
	clicktable(first);

});
